<template>
  <div style="display: flex">
    <task-group class="task-group" title="ToDo" group="task">
      <task-item
        :key="index"
        v-for="(item, index) in todoList"
        :content="item"
      />
    </task-group>
    <task-group class="task-group" title="In Progress" group="task">
      <task-item
        :key="index"
        v-for="(item, index) in inproList"
        :content="item"
      />
    </task-group>
    <task-group class="task-group" title="Done" group="task">
      <task-item
        :key="index"
        v-for="(item, index) in doneList"
        :content="item"
      />
    </task-group>
  </div>
</template>

<script>
import TaskGroup from '../../components/task/TaskGroup'
import TaskItem from '../../components/task/TaskItem'
const todoList = ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六']
const inproList = [
  '任务七',
  '任务八',
  '任务九',
  '任务十',
  '任务十一',
  '任务十二',
]
const doneList = [
  '任务十三',
  '任务十四',
  '任务十五',
  '任务十六',
  '任务十七',
  '任务十八',
]
export default {
  name: 'TaskCard',
  components: { TaskItem, TaskGroup },
  data() {
    return {
      todoList,
      inproList,
      doneList,
    }
  },
}
</script>

<style lang="less" scoped>
.task-group {
  margin: 0 48px;
}
.dragable-ghost {
  border: 1px dashed red;
  opacity: 1;
}
.dragable-chose {
  border: 1px dashed red;
  opacity: 0.8;
}
.dragable-drag {
  border: 1px dashed red;
  opacity: 1;
}
</style>
